<template>
  <div class="home">
    <!-- 轮播图start -->
    <Swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <SwipeItem class="item-swiper" v-for="(item,index) in swiper" :key="index">
        <img :src="item.banner_img" alt />
      </SwipeItem>
    </Swipe>
    <!-- 轮播图end -->

    <!-- 中间导航start -->
    <div class="choose">
      <div>
        <div>
          <img src="../../../public/image/a.png" class="choose_img" />
        </div>
        <p>特色课</p>
      </div>
      <div>
        <div>
          <img src="../../../public/image/b.png" class="choose_img" />
        </div>
        <p>一对一辅导</p>
      </div>
      <div>
        <div>
          <img src="../../../public/image/c.png" class="choose_img" />
        </div>
        <p>学习日历</p>
      </div>
    </div>
    <!-- 中间导航end -->

    <div class="z">
      <p>名师阵容</p>
    </div>

    <!-- 名师列表start -->
    <div class="star">
      <div v-for="(item,index) in home1" :key="index">
        <div>
          <img :src="item.teacher_avatar" alt />
        </div>
        <div>
          <p>{{item.teacher_name}}</p>
          <p class="ptext">{{item.introduction}}</p>
        </div>
      </div>
    </div>
    <!-- 名师阵容end -->

    <div class="z">
      <p>精品课程</p>
    </div>

    <!-- 精品课程start -->
    <div class="jing">
      <div class="jing_for" v-for="(item,index) in home2" :key="index" @click="goDetail(item)">
        <p>{{item.title}}</p>
        <p class="p_small">共1课时</p>
        <p class="p_main" v-for="(itemd,index) in item.teachers_list" :key="index">
          <img class="jing_img" :src="itemd.teacher_avatar" alt />
          <span>{{itemd.teacher_name}}</span>
        </p>
        <p class="p_finaly">
          <span>{{item.sales_num}}人已报名</span>
          <span v-if="item.price == 0">免费</span>
          <span v-else>￥{{item.price}}</span>
        </p>
      </div>
    </div>
    <!-- 精品课程end -->

    <div class="z">
      <p>推荐课程</p>
    </div>

    <!-- 推荐课程start -->
    <div class="jing">
      <div class="jing_for" v-for="(item,index) in home3" :key="index" @click="goDetail(item)">
        <p>{{item.title}}</p>
        <p class="p_small">共1课时</p>
        <p class="p_main" v-for="(itemd,index) in item.teachers_list" :key="index">
          <img class="jing_img" :src="itemd.teacher_avatar" alt />
          <span>{{itemd.teacher_name}}</span>
        </p>
        <p class="p_finaly">
          {{item.sales_num}}人已报名
          <span v-if="item.price == 0">免费</span>
          <span v-else>￥{{item.price}}</span>
        </p>
      </div>
    </div>
    <!-- 推荐课程end -->

    <div class="z">
      <p>明星讲师</p>
    </div>
    <!-- 明星讲师start -->
    <div class="star_teacher">
      <div v-for="(item,index) in home4" :key="index" @click="getTeach(item)">
        <div>
          <img :src="item.teacher_avatar" alt />
        </div>
        <div>
          <p>{{item.teacher_name}}</p>
          <p class="ptext">{{item.introduction}}</p>
        </div>
      </div>
    </div>
    <!-- 明星讲师end -->
    <Drag></Drag>
  </div>
</template>

<script>
import Drag from "../../components/Drag";
import { Swipe, SwipeItem } from "vant";
import { banner, homeList } from "../../https/https";
export default {
  components: {
    Swipe,
    SwipeItem,
    Drag,
  },
  data() {
    return {
      swiper: [],
      home1: [], //名师阵容
      home2: [], //精品课程
      home3: [], //推荐课程
      home4: [], //明星讲师
    };
  },
  mounted() {
    banner().then((res) => {
      this.swiper = res;
    });
    homeList().then((res) => {
      console.log(res);
      //名师阵容list
      this.home1 = res[0].list;
      //精品课程list
      this.home2 = res[1].list;
      //推荐课程list
      this.home3 = res[2].list;
      //明星讲师list
      this.home4 = res[3].list;
    });
  },
  methods: {
    goDetail(item) {
      console.log(item);
      this.$router.push({
        path: "/detail",
        query: { basis_id: item.id },
      });
    },
    getTeach(item) {
      console.log(item.teacher_id);
      this.$router.push({
        path: "/teachdetail",
        query: {
          id: item.teacher_id,
        },
      });
    },
  },
};
</script>

<style scoped>
.home {
  padding-bottom: 50px;
}
.my-swipe .item-swiper {
  height: 200px;
}
.my-swipe .item-swiper img {
  width: 100%;
  height: 100%;
}
.choose {
  height: 70px;
  background-color: #f4f4f4;
  display: flex;
  justify-content: space-around;
}
.choose > div {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background-color: #ffffff;
  margin-top: -30px;
  z-index: 1;
}
.choose > div > p {
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choose > div > div > img {
  width: 30px;
  height: 30px;
}
.choose > div > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25%;
}
.z {
  height: 55.5px;
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
}
.z p {
  margin-left: 15px;
  padding-left: 10px;
  border-left: 2px solid orange;
  font-size: 16px;
  font-weight: 500;
}
.star {
  padding-left: 25px;
  overflow: hidden;
}
.star > div {
  width: 333px;
  height: 45px;
  margin: 15px 0 15px 0;
  display: flex;
  font-size: 14px;
  padding-bottom: 7px;
}
.star > div > div > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.star > div > div > p {
  width: 250px;
  margin-left: 7px;
  margin-bottom: 10px;
}
.jing {
  background-color: #f4f4f4;
  overflow: hidden;
}
.jing_for {
  width: 90%;
  height: 180px;
  margin: 0 auto;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
  font-size: 16px;
}
.jing_for > p {
  margin-left: 15px;
  margin-top: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p_main {
  display: flex;
  align-items: center;
}
.p_small {
  color: #999;
  font-size: 12px;
}
.p_main span {
  color: #999;
  font-size: 12px;
  margin-left: 20px;
}
.jing_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.p_finaly {
  padding-top: 5px;
  padding-right: 10px;
  border-top: 1px solid #999;
  color: #666;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.p_finaly span:nth-child(2) {
  font-size: 16px;
  color: green;
}
.star_teacher {
  overflow: hidden;
  background-color: #f4f4f4;
}
.star_teacher > div {
  width: 90%;
  height: 80px;
  margin: 0 auto;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 14px;
  background-color: #ffffff;
  padding-left: 10px;
  border-radius: 15px;
}
.star_teacher > div > div > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.star_teacher > div > div > p {
  margin-left: 15px;
  margin-bottom: 10px;
}
.ptext {
  width: 200px;
  color: #999;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
